<template>
  <div>
    <el-dialog
      v-model="editVisible"
      width="80%"
      top="3vh"
      title="选择碳票"
      :close-on-click-modal="false"
      @close="handleclose"
    >
      <el-form>
        <el-form-item>
          <div class="container">
            <!-- <div class="handle-box">
              <div>
                <span class="title_name">持有人：</span
                ><el-input
                  v-model="seachfrom.woodlandRightPeople"
                  placeholder="请输入"
                  class="handle-input mr10"
                ></el-input>
              </div>
              <div>
                <span class="title_name">编号：</span
                ><el-input
                  placeholder="请输入"
                  class="handle-input mr10"
                  v-model="seachfrom.certificateNumber"
                ></el-input>
              </div>
              <div>
                <span class="title_name">登记表编号：</span
                ><el-input
                  placeholder="请输入"
                  class="handle-input mr10"
                  v-model="seachfrom.registerNumber"
                ></el-input>
              </div>
              <el-button
                type="primary"
                class="icon-search"
                icon="el-icon-search"
                @click="handleSearch"
                >查询</el-button
              >
              <el-button class="icon-search" @click="emptySearch">清空</el-button>
            </div> -->

            <el-table
              :data="tableData"
              border
              class="table"
              style="width: 90%"
              ref="multipleTable"
              header-cell-class-name="table-header"
              @select="handleSelectTable"
            >
              <el-table-column
                type="selection"
                label="全选"
                width="55"
                v-if="type == 1"
              >
              </el-table-column>
              <el-table-column
                v-if="type == 0 || type == 3"
                prop="id"
                label="序列号"
                width="65"
                align="center"
              >
                <template #default="scope">
                  <el-radio-group v-model="radioValue" @change="handleSelect">
                    <el-radio :label="scope.$index">{{
                      Number(
                        seachfrom.pageSize * (seachfrom.pageNum - 1) +
                          1 +
                          scope.$index
                      )
                    }}</el-radio></el-radio-group
                  >
                </template></el-table-column
              >
              <el-table-column
                v-if="type == 1"
                prop="id"
                label="序列号"
                width="65"
                align="center"
              >
                <template #default="scope">
                  {{
                    Number(
                      seachfrom.pageSize * (seachfrom.pageNum - 1) +
                        1 +
                        scope.$index
                    )
                  }}
                </template></el-table-column
              >
              <el-table-column
                prop="principalPeople"
                label="持有人"
              ></el-table-column>
              <el-table-column
                prop="certificateNumber"
                label="编号"
              ></el-table-column>
              <el-table-column
                prop="registerNumber"
                label="登记表编号"
              ></el-table-column>
              <el-table-column
                prop="area"
                label="项目面积（亩）"
              ></el-table-column>
              <el-table-column
                prop="monitorCarbonReduction"
                label="碳排量（吨）"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
              ></el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="seachfrom.pageNum"
                :page-size="seachfrom.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
              ></el-pagination>
            </div>
            <div class="btn_b">
              <el-button @click="handleclose" class="icon-search1"
                >取消</el-button
              >
              <el-button
                type="primary"
                class="icon-search"
                @click="handleSaveEdit"
                >确定</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const radioValue = ref(context.attrs.radioValue);
    const type = ref(context.attrs.type);
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    const seachfrom = reactive({
      certificateNumber: null,
      registerNumber: null,
      woodlandUsePeople: null,
      woodlandRightPeople: null,
      pageNum: 1,
      pageSize: 8,
      carbonType: 0,
      usableCarbon: 0,
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    const SelectList = ref([]);
    // 获取表格数据
    const getData = () => {
      let url = "";
      if (type.value == 0) {
        // 获取可抵押的碳票
        url = "carbon/client/carbon/getAccountCarbonList";
      } else if (type.value == 1) {
        // 获取可抵销的碳票
        url = "client/carbon/getTradeCarbon";
      }
      if (type.value == 3) {
        api
          .postFormAPI("carbon/client/carbon/getPassList", seachfrom)
          .then((res) => {
            if (res.data.code == 1) {
              for (var i = 0; i < res.data.data.length; i++) {
                res.data.data[i].checked = false;
              }
              tableData.value = res.data.data.list;
              pageTotal.value = res.data.data.total || 0;
              console.log(res);
            }
            //数据处理
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        api
          .postFormAPI(url, seachfrom)
          .then((res) => {
            if (res.data.code == 1) {
              for (var i = 0; i < res.data.data.length; i++) {
                res.data.data[i].checked = false;
              }
              tableData.value = res.data.data.list;
              pageTotal.value = res.data.data.total || 0;
              console.log(res);
            }
            //数据处理
          })
          .catch((err) => {
            console.log(err);
          });
      }
    };
    getData();
    // 查询操作
    const handleSearch = () => {
      seachfrom.pageNum = 1;
      getData();
    };
    const emptySearch = () => {
      seachfrom.pageNum = 1;
      seachfrom.registerNumber = null;
      seachfrom.certificateNumber = null;
      seachfrom.woodlandRightPeople = null;
    };
    const handleSelect = (res) => {
      console.log(res);
      radioValue.value = res;
    };
    const handleSelectTable = (res) => {
      console.log(res);
      SelectList.value = res;
    };
    const handlePageChange = (val) => {
      seachfrom.pageNum = val;
      getData();
    };
    const handleSaveEdit = () => {
      if (type.value == 0 || type.value == 3) {
        context.emit(
          "handleSelect",
          tableData.value[radioValue.value],
          radioValue.value
        );
      } else {
        context.emit("handleSelect", SelectList.value);
      }
    };
    return {
      type,
      radioValue,
      editVisible,
      tableData,
      seachfrom,
      pageTotal,
      SelectList,
      handleclose,
      handleSearch,
      emptySearch,
      handleSelect,
      handleSelectTable,
      handleSaveEdit,
      handlePageChange,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/common.less";
&:deep(.el-dialog) {
  // background: none;
  // box-shadow: none;
}
&:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #909399;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 360px;
  font-size: 30px;
}
&:deep(.el-form-item__content) {
  text-align: center;
}
&:deep(.el-input__inner) {
  width: 150px !important;
}
.btn_b {
  // padding: 30px;
}
</style>
